<template>
  <div class="detail">
    <back-header></back-header>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in detailObj.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="expen">
      <h6>{{ detailObj.basicInfo?.name }}</h6>
      <p>{{ detailObj.basicInfo?.characteristic }}</p>
      <section>
        <span style="color: red"
          >低价￥{{ detailObj.basicInfo?.minPrice }}</span
        >
        <span> 原价￥{{ detailObj.basicInfo?.originalPrice }}</span>
        <span class="right">库存{{ detailObj.basicInfo?.stores }}</span>
      </section>
    </div>
    <detail-title @childTab="cut"></detail-title>
    <div v-html="detailObj.content" v-show="tabIndex == 0"></div>
    <div class="empty" v-show="tabIndex == 1">
      <van-empty description="暂无评价" />
    </div>
  </div>
  <!-- 加入购物车的弹窗 -->
  <van-action-sheet v-model:show="show" title=" ">
    <div class="cot-top">
      <img :src="detailObj.basicInfo.pic" alt="">
      <section>
        <p>{{detailObj.basicInfo.name}}</p>
        <span>￥{{price}}</span>
      </section>
    </div>
    <ul class="cot-ct">
      <li v-for="(item,index) in detailObj.properties" :key="index">
         <h6>{{item.name}}</h6>
         <!-- <span :class="{active: ties[index] == n.id}" v-for="(n,i) in item.childsCurGoods" :key="i" @click="checkTies(n,index)">{{n.name}}</span> -->

         <span :class="{active: ties.some(item => item == n.id)}" v-for="(n,i) in item.childsCurGoods" :key="i" @click="checkTies(n,index)">{{n.name}}</span>
      </li>
    </ul>
    <section class="cot-ft">
      <span>购买数量</span>
      <van-stepper v-model="puyNum" />
    </section>
    <van-button type="danger" :block="true" @click="addCart">加入购物车</van-button>
  </van-action-sheet>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" />
    <van-action-bar-icon
      :icon="isStar ? 'star' : 'star-o'"
      :text="isStar ? '已收藏' : '未收藏'"
      color="#ff5000"
      @click="isStar = !isStar"
    />
    <van-action-bar-button type="warning" text="立即购买" />
    <van-action-bar-button type="danger" text="加入购物车" @click="show=true"/>
  </van-action-bar>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { detail,getPrice } from "../../api/second/index";
import backHeader from "../../components/backHeader.vue";
import DetailTitle from "../../components/detailTitle.vue";
import { Notify } from 'vant';
import { useStore } from 'vuex';
export default {
  components: { backHeader, DetailTitle },
  setup() {
    const route = useRoute();
    const id = route.params.id;
    const store = useStore();
    // console.log(id);
    const data = reactive({
      detailObj: {}, // 详情页面的数据
      isStar: false, // 是否收藏
      show: false, // 规格的面板显示
      puyNum: 1, // 购买的数量
      price: 0, // 商品的单价
      ties: [], // 存放选中的规格的id
      tiesName: [], // 选择规格的名字
    });
    const tabIndex = ref(0); // 0 就代表显示商品介绍，1就代表显示商品的评价
    detail({ id: id }).then((res) => {
      // console.log(res);
      data.detailObj = res.data;
      data.price = res.data.basicInfo.minPrice // 商品价格的默认值
    });
    const cut = (val) => {
      // 商品介绍和商品评价的切换事件
      tabIndex.value = val;
    };
    const checkTies = (val,i) => { // 规格选择的函数
       if (i != 0 && !data.ties[i-1]) {
          Notify({ type: 'warning', message: '请按照顺序选择规格！' });
          return;
       };
       data.ties[i] = val.id;
       data.tiesName[i] = val.name;
       getPrice({goodsId:id,propertyChildIds: data.ties.join(',')}).then(res => {
         data.price = res.data.price;
       })
      // console.log(data.ties);
    }
    const addCart = () => { // 加入购物车的函数
    // data.ties.length > 0 错误的判断方法
    // data.ties.length == data.detailObj.properties.length 判断选择的规格，是否和后台返回的规格长度相等
      if (data.ties.length == data.detailObj.properties.length) {
          // console.log('允许加入购物车');
          let obj = {
             imgUrl: data.detailObj.basicInfo.pic, // 商品的图片
             price: data.price, // 商品的价格
             num: data.puyNum, // 商品的购买数量
             name: data.detailObj.basicInfo.name, // 商品的名字
             tiesId: data.ties.join(','), // 规格的id
             tiesName: data.tiesName, // 规格的名字
             ischeck: false // 是否被选中的字段
          }
          store.commit('storeCart',obj);
      } else {
          Notify({ type: 'warning', message: '请选择规格！' });
      }

      data.show = false // 隐藏规格面板
    }
    return {
      ...toRefs(data),
      cut,
      tabIndex,
      checkTies,
      addCart
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #e9e9e9;
}
.my-swipe {
  img {
    width: 100%;
    height: 375px;
  }
}
.expen {
  padding: 0 10px;
  background: #fff;
  font-size: 13px;
  color: #999;
  overflow: hidden;
  margin-top: -2px;
  h6 {
    font-size: 16px;
    line-height: 50px;
    color: #000;
  }
  section {
    margin: 15px 0 10px;
    .right {
      float: right;
    }
  }
}
.cot-top{
  padding: 15px;
  display: flex;
  font-size: 13px;
  img{
    width: 62px;
    height: 62px;
    margin-right: 10px;
  }
  span{
    color: red;
    margin-top: 30px;
    display: block;
  }
}
.cot-ct{
  border-top: 1px solid #ccc;
  padding: 10px;
  font-size: 12px;
  li{
    display: flex;
    flex-wrap: wrap;
  }
  h6{
    line-height: 50px;
    width: 100%;
  }
  span{
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .active{
    border-color: red;
  }
}
.cot-ft{
  display: flex;
  height: 70px;
  border-top: 1px solid #ccc;
  align-items: center;
  padding: 0 15px;
  justify-content: space-between;
  font-size: 13px;
}
</style>